<template>
  <div class="cash_order">
    <div class="container">
      <div class="container_title">
        <span class="iconfont icon-untitled60"></span>
        <span class="title">收银订单</span>
      </div>
      <div class="container_content">
        <div class="handle_box">
          <el-form :inline="true" ref="formData" :model="formData" label-width="80px">
            <el-form-item label="创建时间">
              <Date-picker
                :value="formData.foundTime_pick"
                format="yyyy/MM/dd"
                type="daterange"
                placement="bottom-end"
                placeholder="选择日期"
                @on-change="changeTimePick"
                style="width: 200px">
              </Date-picker>
            </el-form-item>
            <el-form-item label="订单号">
              <Input v-model="formData.order_num" style="width: 260px;" class="search_btn">
                <Button type="primary" slot="append" icon="ios-search"></Button>
              </Input>
            </el-form-item>
            <el-form-item label="用户名">
              <Input v-model="formData.userName" style="width: 260px;" class="search_btn">
                <Button type="primary" slot="append" icon="ios-search"></Button>
              </Input>
            </el-form-item>
          </el-form>
          <div class="btn-box">
            <Button type="primary" @click="checkQR">查看收款二维码</Button>
          </div>
        </div>
        <div class="order_list">
          <el-table
            :data="orderList[pageIndex-1]"
            style="width: 100%"
            :header-cell-style="getRowClass"
            v-loading="loading"
            size="small">
            <el-table-column
              prop="order_id"
              label="订单号">
            </el-table-column>
            <el-table-column
              prop="nickname"
              label="商品信息">
            </el-table-column>
            <el-table-column
              prop="pay_price"
              label="实际支付">
            </el-table-column>
            <el-table-column
              prop="member_price"
              label="优惠价格">
            </el-table-column>
            <el-table-column
              prop="pay_time"
              label="支付时间">
            </el-table-column>
          </el-table>
          <div class="page">
            <Page :total="total" :page-size="pageSize" @on-change="changePage"></Page>
          </div>
        </div>
      </div>
    </div>
    <aside>
      <Modal
        v-model="checkQRModal"
        title="收款码">
        <div class="qr_box">
          <div class="wChat">
            <viewer :images="QR_info.wChat">
              <img v-for="(item,index) in QR_info.wChat" :key="index" v-show="index===0" :src="item" alt="">
            </viewer>
          </div>
          <div class="zfb">
            <viewer :images="QR_info.zfb">
              <img v-for="(item,index) in QR_info.zfb" :key="index" v-show="index===0" :src="item" alt="">
            </viewer>
          </div>
        </div>
      </Modal>
    </aside>
  </div>
</template>

<script>
  import orderInfo from '../../../apiData/orderList/cash_order.js'
  import QR_info from '../../../apiData/QR_list.js'
  export default {
    name: "cash_order",
    data() {
      return {
        loading: false,
        formData: {
          foundTime_pick: [],
          order_num: '',
          userName: ''
        },
        total: 0,
        pageIndex: 1,
        pageSize: 30,
        orderList: [],
        checkQRModal: false,
        QR_info: {},
      }
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        this.QR_info = QR_info;
        this.orderList = orderInfo.list;
        this.total = orderInfo.count
      },
      // 选择订单时间
      changeTimePick(timeCount) {
        console.log(timeCount);
      },
      //改变table表头背景和字体颜色
      getRowClass ({ row, column, rowIndex, columnIndex }) {
        return 'background:transparent;'
      },
      // 查看二维码
      checkQR() {
        this.checkQRModal = true;
      },
      // 换页
      changePage(page) {
        this.pageIndex = page;
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../style/element.scss";
  .cash_order{
    .container_content{
      padding: 20px;
      .order_list{
        .page{
          text-align: right;
          margin-top: 16px;
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  .qr_box{
    display: flex;
    justify-content: space-around;
    .wChat, .zfb{
      width: 200px;
      height: 200px;
      img{
        width: 200px;
        height: 200px;
        cursor: pointer;
      }
    }
  }
  .search_btn{
    /deep/ .ivu-input-group-append{
      button{
        background: #2d8cf0;
        color: #fff;
        padding: 4px 15px 5px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
</style>
